<template>
  <div class="container">
    <!-- 添加学科对话框 -->
    <!-- 新增学科弹层 -->
    <el-dialog
      @open="onOpen"
      @close="onClose"
      :title="showmodify ? '新增学科' : '修改学科'"
      width="500px"
      :visible="showsubject"
    >
      <el-form
        ref="fromRef"
        :model="roleForm"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="roleForm.subjectName"
            placeholder="请输入单行文本学科名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            v-model="roleForm.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <!-- /新增学科弹层 -->
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects.js'

export default {
  props: {
    // 控制弹层是否显示
    showsubject: {
      type: Boolean,
      require: true
    },
    // 控制页面 的 文字 是 修改 还是 添加
    showmodify: {
      type: Boolean,
      require: true
    }
    // roleForms: {
    //   type: [Object, Array],
    //   require: true
    // }

  },
  data () {
    return {
      roleForm: {
        subjectName: '', // 新增学科名称
        isFrontDisplay: 0 // 是否在页面显示 1是 0否
      },
      rules: {
        subjectName: [{
          required: true,
          message: '请输入单行文本学科名称',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
  },
  methods: {
    // 渲染点击修改之后拿到的名字
    async getDeptsInfo (row) {
      this.roleForm = { ...row }
      if (this.roleForm.isFrontDisplay) {
        this.roleForm.isFrontDisplay = true
      }
    },
    // 新增学科 弹层,
    onOpen () {},
    onClose () {
      this.$refs.fromRef.resetFields()
      this.roleForm = this.$options.data().roleForm
      // 关闭弹层
      this.$emit('update:showsubject', false)
    },
    close () {
      this.onClose()
    },
    // 确定 增加 或 修改
    handelConfirm () {
      this.$refs.fromRef.validate(async valid => {
        if (!valid) return
        if (this.showmodify) {
          try {
            await add(this.roleForm) // 调用新增学科接口
            // 刷新页面
            this.$emit('list')
            this.$message.success('添加数据成功')
          } catch (error) {
            this.$message.error('添加数据失败')
          }
        } else {
          try {
            await update(this.roleForm) // 调用修改接口
            // 刷新页面
            this.$emit('list')
            this.$message.success('修改数据成功')
          } catch (error) {
            this.$message.error('修改数据失败')
          }
        }

        this.close()
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
